<template>
	<div class="home">
		<div class="draw">
			<LuckyWheel
				ref="myLucky"
				width="300px"
				height="300px"
				:prizes="prizes"
				:blocks="blocks"
				:buttons="buttons"
				@start="startCallback"
				@end="endCallback"
			/>
		</div>
		<div class="content">
			<div class="money">
				当前金额：{{ returnMoney }}
				<span v-if="kingNum">金币：{{ kingNum }}</span>
				<span v-if="diamondNum">钻石：{{ diamondNum }}</span>
			</div>
			<div class="btn">
				<button @click="addFrequency">获取抽奖次数</button>
			</div>
			<div class="record-list">
				<div v-for="(item, index) in recordList" :key="index">
					{{ item.time }}{{ item.text }}
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { Dialog, Toast } from 'vant';
import { useRouter } from 'vue-router';
import dayjs from 'dayjs';

const router = useRouter();

let myLucky = ref(null);
let blocks = reactive([{ padding: '13px', background: '#617df2' }]);
let prizes = reactive([
	{
		fonts: [
			{ text: '特等奖', top: '10%', fontColor: 'red', fontWeight: '700' },
		],
		background: '#e9e8fe',
	},
	{
		fonts: [
			{ text: '一等奖', top: '10%', fontColor: 'red', fontWeight: '700' },
		],
		background: '#b8c5f2',
	},
	{
		fonts: [
			{ text: '二等奖', top: '10%', fontColor: 'red', fontWeight: '700' },
		],
		background: '#e9e8fe',
	},
	{
		fonts: [
			{ text: '三等奖', top: '10%', fontColor: 'red', fontWeight: '700' },
		],
		background: '#b8c5f2',
	},
	{
		fonts: [
			{ text: '四等级', top: '10%', fontColor: 'red', fontWeight: '700' },
		],
		background: '#e9e8fe',
	},
	{
		fonts: [
			{ text: '五等奖', top: '10%', fontColor: 'red', fontWeight: '700' },
		],
		background: '#b8c5f2',
	},
]);
let buttons = reactive([
	{ radius: '50px', background: '#617df2' },
	{ radius: '45px', background: '#afc8ff' },
	{
		radius: '40px',
		background: '#869cfa',
		pointer: true,
		fonts: [{ text: '开始\n抽奖\n0', top: '-20px' }],
	},
]);

onMounted(() => {
	frequency.value = localStorage.getItem('frequency')
		? Number(localStorage.getItem('frequency'))
		: 0;
	buttons[2].fonts[0].text = '开始\n抽奖\n' + frequency.value;
	money.value = localStorage.getItem('money')
		? Number(localStorage.getItem('money'))
		: 799.9;
	kingNum.value = localStorage.getItem('kingNum')
		? Number(localStorage.getItem('kingNum'))
		: 0;
	diamondNum.value = localStorage.getItem('diamondNum')
		? Number(localStorage.getItem('diamondNum'))
		: 0;
	recordList.value = localStorage.getItem('recordList')
		? JSON.parse(localStorage.getItem('recordList'))
		: [];
});

// 点击抽奖按钮会触发star回调
const startCallback = () => {
	if (frequency.value <= 0) {
		Toast('抽奖次数不足，请获取抽奖次数');
		return;
	}
	// 调用抽奖组件的play方法开始游戏
	myLucky.value.play();
	reduceFrequency();
	// 模拟调用接口异步抽奖
	setTimeout(() => {
		// 假设后端返回的中奖索引是0
		const index = 0;
		// 调用stop停止旋转并传递中奖索引
		myLucky.value.stop(index);
	}, 1000);
};

// 抽奖结束会触发end回调
const endCallback = prize => {
	console.log(prize);
	let message = '';
	if (money.value >= 799.99) {
		if (kingNum.value >= 9) {
			if (kingNum.value === 9.9) {
				if (diamondNum.value >= 9) {
					message = '恭喜你，获得0.1个钻石(10个钻石可换取1金币)！';
				} else {
					message = '恭喜你，获得1个钻石(10个钻石可换取1金币)！';
				}
			} else {
				message = '恭喜你，获得0.1个金币(10个金币可换取0.01元)！';
			}
		} else {
			message = '恭喜你，获得1个金币(10个金币可换取0.01元)！';
		}
	} else if (money.value < 799.99) {
		message = '恭喜你，获得0.01元现金红包！';
	}
	Dialog.alert({
		message,
		theme: 'round-button',
	}).then(() => {
		// on close
		if (money.value >= 799.99) {
			if (kingNum.value >= 9.9) {
				addDiamond();
			} else {
				addKing();
			}
		} else if (money.value < 799.99) {
			addMoney();
		}
		addRecord(message.replace('恭喜你', ''));
	});
};

let frequency = ref(0);
// 获取抽奖次数
const addFrequency = () => {
	frequency.value++;
	buttons[2].fonts[0].text = '开始\n抽奖\n' + frequency.value;
	localStorage.setItem('frequency', frequency.value);
};
// 减少抽奖次数
const reduceFrequency = () => {
	frequency.value--;
	buttons[2].fonts[0].text = '开始\n抽奖\n' + frequency.value;
	localStorage.setItem('frequency', frequency.value);
};

// 增加钱
let money = ref(799.9);
const addMoney = () => {
	if (money.value === 799.99) return;
	money.value += 0.01;
	money.value = Number(money.value.toFixed(2));
	localStorage.setItem('money', money.value);
};

// 增加金币
let kingNum = ref(0);
const addKing = () => {
	if (kingNum.value >= 9) {
		if (kingNum.value === 9.9) return;
		kingNum.value += 0.1;
	} else {
		kingNum.value++;
	}
	kingNum.value = Number(kingNum.value.toFixed(2));
	localStorage.setItem('kingNum', kingNum.value);
};

// 增加钻石
let diamondNum = ref(0);
const addDiamond = () => {
	if (diamondNum.value >= 9) {
		diamondNum.value += 0.1;
		if (diamondNum.value === 9.9) {
			Dialog.alert({
				message: '你的钱被老鼠偷走了，惊不惊喜意不意外！',
				theme: 'round-button',
			}).then(() => {
				money.value = 0;
				kingNum.value = 0;
				diamondNum.value = 0;
				localStorage.clear();
			});
		}
	} else {
		diamondNum.value++;
	}
	diamondNum.value = Number(diamondNum.value.toFixed(2));
	localStorage.setItem('diamondNum', diamondNum.value);
};

// 增加记录
let recordList = ref([]);
const addRecord = text => {
	recordList.value.unshift({
		text,
		time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
	});
	console.log(recordList.value);
	localStorage.setItem('recordList', JSON.stringify(recordList.value));
};
const returnMoney = computed(() => {
	return returnFloats(money.value);
});
const returnFloats = value => {
	if (value === null) {
		value = 0;
	}
	let newValue = value;
	let xsd = newValue.toString().split('.');
	if (xsd.length === 1) {
		newValue = newValue.toString() + '.00';
		return newValue;
	}
	if (xsd.length > 1) {
		if (xsd[1].length < 2) {
			newValue = newValue.toString() + '0';
		}
		return newValue;
	}
};
</script>

<style lang="scss" scoped>
.home {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	.draw {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}
	.content {
		margin-top: 30px;
		text-align: center;
		.money {
			font-size: 18px;
			margin-bottom: 10px;
			span {
				margin-left: 5px;
			}
		}
		.btn {
			margin-bottom: 30px;
			button {
				width: 150px;
				height: 40px;
				border-radius: 4px;
				border: 1px solid #6379f9;
				font-size: 16px;
				font-weight: 500;
				color: #fff;
				cursor: pointer;
				background: #6379f9;
			}
		}
		.record-list {
			height: calc(100vh - 462px);
			overflow-y: auto;
		}
	}
}
</style>
